<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="修改安全密码" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="itemBox">
			<text class="title">设置密码</text>
			<input 
				class="uni-input input" 
				placeholder="请输入安全密码" 
				:password="showPassword"
				type="number"
				maxlength="6"
				v-model="password"
			/>
			<uni-icons 
				class="icon"
				:type="showPassword ? 'eye' : 'eye-filled'" 
				size="26" 
				:color="showPassword ? '#8a8a8a' : '#f9c234'"
				@click="showPassword = !showPassword"
			></uni-icons>
		</view>
		<view class="itemBox">
			<text class="title">确认密码</text>
			<input 
				class="uni-input input" 
				placeholder="请输入安全密码" 
				:password="showVerifyPassword"
				type="number"
				maxlength="6"
				v-model="verifyPassword"
			/>
			<uni-icons 
				class="icon"
				:type="showVerifyPassword ? 'eye' : 'eye-filled'" 
				size="26" 
				:color="showVerifyPassword ? '#8a8a8a' : '#f9c234'"
				@click="showVerifyPassword = !showVerifyPassword"
			></uni-icons>
		</view>
		<button class="verify" @click="verify">确认</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showPassword:true,
				showVerifyPassword:true,
				password:'',
				verifyPassword:''
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.itemBox{
		width: 100%;
		background-color: #fff;
		height: 90rpx;
		float: left;
		border-bottom: 1rpx solid #f8f8f8;
		display: flex;
		align-items: center;
		.title{
			width: auto;
			float: left;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-left: 5%;
		}
		.input{
			flex: 1;
			margin-left: 30rpx;
			color: #454545;
		}
		.icon{
			float: right;
			margin-right: 5%;
		}
	}
	.itemBox:nth-child(2){
		margin-top: 20rpx;
	}
	.itemBox:last-child{
		border-bottom-width: 0rpx;
	}
	.verify{
		width: 90%;
		float: left;
		margin-left: 5%;
		margin-top: 30rpx;
		background-color: #f9c234;
		border:0rpx;
		color: #fff;
		border-radius: 15rpx;
	}
</style>